<html>
<head>
<title>Balloon example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.Balloon');
	load('core.ui.DragWindow');

	function init() {

		var owner = new core.ui.DragWindow(null, 0, 0, 200, 200);
		owner.setStyle('background-color', 'red');
		owner.center();

		var left = new core.ui.Balloon(owner, 'This is a <strong>LEFT</strong> balloon.<br/>It will disappear just after <strong>10</strong> seconds.', core.ui.Balloon.LEFT, 10);
		var right = new core.ui.Balloon(owner, 'This is a <strong>RIGHT</strong> balloon.<br/>It will disappear just after <strong>15</strong> seconds.', core.ui.Balloon.RIGHT, 15);
		var top = new core.ui.Balloon(owner, 'This is a <strong>TOP</strong> balloon.<br/>It will disappear just after <strong>20</strong> seconds.', core.ui.Balloon.TOP, 20);
		var bottom = new core.ui.Balloon(owner, 'This is a <strong>BOTTOM</strong> balloon.<br/>It will never disappear :)', core.ui.Balloon.BOTTOM);
			
		owner.show();
			
		left.show();
		right.show();
		top.show();
		bottom.show();
	}
	
</script>
</head>

<body onload="init()" />
</html>